<div class="content-wrapper" [@routerTransition]>
    <sub-header  idName="Administration.StaticPages" [title]="'StaticPages' | localize">
        <div role="actions">
            <div class="btn-group" dropdown placement="button right"  *ngIf="('App.UrlRewriteByMap'| checkFeature) && ('Pages_UrlRewriteByMap'| permission)">
                <button id="dropdownButtonExcelOperations" dropdownToggle type="button" class="btn btn-outline-success dropdown-toggle mr-1"
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-controls="dropdownMenuExcelOperations">
                    <i class="far fa-file-excel"></i> {{"ImportDataForUrlRewriter" | localize}}
                </button>
                <ul id="dropdownMenuExcelOperations" class="dropdown-menu dropdown-menu-right dropdown-excel-operations" role="menu" *dropdownMenu aria-labelledby="dropdownButtonExcelOperations">
                    <li role="menuitem">
                        <a class="dropdown-item text-dark" id="ExportDataToExcelButton" (click)="exportToExcel()"
                           href="javascript:;">
                            <i class="fa fa-download mr-2 mt-1 text-dark" style="font-size: 1rem;"></i>
                            {{'ExportToExcel' | localize}}
                        </a>
                    </li>
                    <li role="menuitem">
                        <a href="javascript:;" class="no-padding">
                            <span class="fileinput-button">
                                <p-fileUpload customUpload="true" name="ExcelFileUpload" #ExcelFileUpload
                                              maxFileSize="10000000" auto="auto" accept=".csv,.xls,.xlsx"
                                              (uploadHandler)="uploadExcel($event)" (onError)="onUploadExcelError()"
                                              chooseLabel="{{'ImportFromExcel' | localize}}">
                                </p-fileUpload>
                            </span>
                        </a>
                    </li>
                    <li class="divider dropdown-divider"></li>
                    <li role="menuitem">
                        <span class="dropdown-item-text text-muted pl-3" href="#">
                            <small [innerHTML]="l('ImportToExcelSampleFileDownloadInfo', '<a href=/assets/sampleFiles/ImportUsersSampleFile.xlsx>' + l('ClickHere') + '</a>')"></small>
                        </span>
                    </li>
                </ul>
            </div>

            <button (click)="siteMapBuild()" class="btn btn-default blue mr-1" *ngIf="'Pages_Manage_SiteMap'| permission">
                <i class="fa bi-recycle"></i> {{"SiteMaps" | localize}}
            </button>

            <button (click)="generateWholeSitePages()" class="btn btn-default blue mr-1" *ngIf="'Pages_StaticPages_Build'| permission">
                <i class="fa bi-recycle"></i> {{"GenerateWholeSitePages" | localize}}
            </button>

            <button (click)="config()" class="btn btn-default blue mr-1" *ngIf="'Pages_StaticPages_Settings'| permission">
                <i class="fa bi-tools"></i> {{"ConfigFile" | localize}}
            </button>

            <button (click)="delete('')" class="btn btn-warning" *ngIf="'Pages_StaticPages_Delete'| permission">
                <i class="fa bi-trash"></i> {{"Delete" | localize}}
            </button>
        </div>
    </sub-header>
    <section class="content d-flex flex-column flex-column-fluid"  [busyIf]="loading">
        <div [class]="containerClass">
            <div class="card card-custom gutter-b">
                <div class="card-body">
                    <form class="form" autocomplete="new-password">
                        <div class="row align-items-center mb-4">
                            <div class="col-sm-12">
                                <div class="form-group m-form__group align-items-center">
                                    <div class="input-group">
                                        <input [(ngModel)]="filterText" name="filterText" autoFocus
                                               class="form-control m-input" [placeholder]="l('SearchWithThreeDot')"
                                               type="text">
                                        <div class="input-group-append">
                                            <button (click)="getLists()" class="btn btn-default"
                                                    type="submit">
                                                <i class="icon-magnifier"
                                                   [attr.aria-label]="l('Search')"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row mb-6">
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <a *ngFor="let item of positionDic; let i = index" (click)="goToPath(item)" title="{{item}}" href="javascript:void(0)">
                                        {{arr[i]}} <span style="color:black">></span>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="row mb-6">
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <span style="float:right;">{{'StaticPageNotGenerate' | localize}}: {{generateResult.toBeGenerated}},{{'StaticPageGenerating' | localize}}: {{generateResult.generating}},{{'StaticPageGenerated' | localize}}:{{generateResult.genratedSuccussfully}} </span>
                                </div>
                            </div>
                        </div>
                    </form>

                    <div class="row align-items-center">
                        <!--<Primeng-TurboTable-Start>-->
                        <div class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading">
                            <p-table #dataTable sortMode="multiple" (onLazyLoad)="getLists($event)"
                                [value]="primengTableHelper.records"
                                rows="{{primengTableHelper.defaultRecordsCountPerPage}}" [paginator]="false"
                                [lazy]="true" [scrollable]="true" ScrollWidth="100%"
                                [responsive]="primengTableHelper.isResponsive"
                                [resizableColumns]="primengTableHelper.resizableColumns"
                                [(selection)]="selectedDatas"
                                dataKey="path" 
                                selectionMode="multiple">
                                <ng-template pTemplate="header">
                                    <tr>
                                        <th style="width:3%">
                                            <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
                                        </th>
                                        <th style="width: 10%">
                                            {{'Actions' | localize}}</th>
                                        <th>
                                            栏目名称
                                        </th>
                                        <th style="width: 20%">
                                            Path
                                        </th>
                                        <th style="width: 15%">
                                            {{'CreationTime' | localize}}
                                        </th>
                                    </tr>
                                </ng-template>
                                <ng-template pTemplate="body" let-record="$implicit">
                                    <tr>
                                        <td style="width: 3%">
                                            <p-tableCheckbox [value]="record" (click)="$event.stopPropagation()"></p-tableCheckbox>
                                        </td>
                                        <td style="width: 10%">
                                            <a href="javascript:void(0)" class="mr-2" *ngIf="('Pages_StaticPages_Build'| permission) && record.isDirectory" (click)="generatePages(record.path)"><i class="bi bi-arrow-clockwise text-info" title="{{'StaticPagGenerate' | localize}}"></i></a>
                                            <a href="javascript:void(0)" class="mr-2" *ngIf="('Pages_StaticPages_Build'| permission) && !record.isDirectory" (click)="visitPageByPath(record.path)"><i class="bi bi-arrow-clockwise text-info" title="{{'StaticPagGenerate' | localize}}"></i></a>
                                            <a href="javascript:void(0)" class="mr-2" *ngIf="'Pages_StaticPages_Delete'| permission" (click)="delete(record.path)"><i class="bi bi-x text-info" title="{{'Delete' | localize}}"></i></a>
                                            <a href="{{record.frontUrl}}" *ngIf="!record.isDirectory"  target="_blank" ><i class="bi bi-search text-info" title="{{'LookOver' | localize}}"></i></a>
                                        </td>
                                        <td>
                                            <span class="p-column-title"> 栏目名称</span>
                                            <span title="{{record.name}}">
                                                <a href="javascript:void(0)" (click)="goToPath(record.path)" >{{record.name}}</a>
                                                
                                            </span>
                                        </td>
                                        <td style="width: 20%">
                                            <span class="p-column-title"> Path</span>
                                            <span title="{{record.gender}}">
                                                {{record.path}}
                                            </span>
                                        </td>
                                        <td style="width: 15%">
                                            <span class="p-column-title"> {{'CreationTime' | localize}}</span>
                                            {{record.creationTime | luxonFormat:'F'}}
                                        </td>
                                    </tr>
                                </ng-template>
                            </p-table>
                            <div class="primeng-no-data" *ngIf="primengTableHelper.totalRecordsCount == 0">
                                {{'NoData' | localize}}
                            </div>
                            <div class="primeng-paging-container">
                                <p-paginator [rows]="primengTableHelper.defaultRecordsCountPerPage" #paginator
                                    (onPageChange)="getLists($event)"
                                    [totalRecords]="primengTableHelper.totalRecordsCount"
                                    [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage"
                                    [showCurrentPageReport]="true"
                                    [currentPageReportTemplate]="'TotalRecordsCount' | localize:primengTableHelper.totalRecordsCount">
                                </p-paginator>
                            </div>
                        </div>
                        <!--<Primeng-TurboTable-End>-->
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
<json-editor-modal #jsonEditorModal (callback)="configSave($event)"></json-editor-modal>
